<template>
  <div class="padding-lr-xl ">
    <el-card>
      <div slot="header" class="clearfix text-left">
        <span class="title-icon">基础配置</span>
      </div>
      <el-form :model="form" ref="basisForm" :rules="rules" size="mini">
        <el-row>
          <el-col :span="6">
            <el-form-item
              label="渠道类型："
              label-width="120px"
              prop="channelType"
            >
              <el-select
                size="mini"
                v-model="form.channelType"
                placeholder="请选择渠道类型"
              >
                <el-option
                  v-for="item in channelTypeList"
                  :key="item.value"
                  :label="item.type"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="渠道代码：" label-width="120px" prop="code">
              <el-input size="mini" v-model="form.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="最小单箱计费重：" label-width="120px">
              <el-input size="mini" v-model="form.minChargeWeight"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="平均到货时间：" label-width="120px">
              <el-input size="mini" v-model="form.arriveTime"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="渠道名称：" label-width="120px" prop="name">
              <el-input size="mini" v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态：" label-width="120px" prop="status">
              <el-select
                size="mini"
                v-model="form.status"
                placeholder="请选择状态"
              >
                <el-option label="启用" value="1"></el-option>
                <el-option label="关闭" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="最小运单计费量：" label-width="120px">
              <el-input size="mini" v-model="form.minChargeCount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="渠道说明：" label-width="120px">
              <el-input size="mini" v-model="form.channelExplain"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item
              label="体积重规则："
              label-width="120px"
              prop="bulkfactorRule"
            >
              <el-select
                size="mini"
                v-model="form.bulkfactorRule"
                placeholder="请选择体积重规则"
              >
                <el-option
                  v-for="(label, value) in volumeWightRules"
                  :key="value"
                  :label="label"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item
          label="渠道能力："
          label-width="120px"
          prop="channelAbility1"
        >
          <el-checkbox-group size="mini" v-model="form.channelAbility1">
            <el-checkbox
              v-for="item in channelAbilitys"
              :key="item.id"
              :label="`${item.id}`"
              name="channelAbility"
            >
              {{ item.category }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="特殊产品："
          label-width="120px"
          prop="specialProduct1"
        >
          <el-checkbox-group size="mini" v-model="form.specialProduct1">
            <el-checkbox
              v-for="item in specialProducts"
              :key="item.id"
              :label="`${item.id}`"
              name="specialProduct"
            >
              {{ item.category }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="其他：" label-width="120px" prop="other1">
          <el-checkbox-group size="mini" v-model="form.other1">
            <el-checkbox
              v-for="item in others"
              :key="item.id"
              :label="`${item.id}`"
              name="other"
              >{{ item.category }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="margin-top">
      <div slot="header" class="clearfix text-left">
        <span class="title-icon">价格表</span>
      </div>

      <el-tabs v-model="activeName" @tab-click="handleClick" v-if="tableInfo">
        <el-tab-pane
          v-for="item in tableInfo.channelLoadingPorts"
          :key="item.id"
          :label="`${loadPortAddress[item.consignmentPlaceId]} +${item.price}`"
          :name="`${item.consignmentPlaceId}`"
        >
          <TableComponent
            v-if="activeName == item.consignmentPlaceId"
            :status="`t${item.id}`"
            :tableColumns="tableInfo.channelChargingSections"
            :tableData="tableInfo.channelSubareas"
            :channelFormulaMap="tableInfo.channelFormulaMap"
            :countrys="countrys"
            :countryStates="countryStates"
          />
        </el-tab-pane>
      </el-tabs>

      <div v-else>暂无价格</div>
    </el-card>
  </div>
</template>

<script>
import { m } from "@/store/yg/common/local";
import { ajax } from "@/store/yg/common/utils";
import { clone } from "@/utils/clone";
import TableComponent from "./TableComponent";

export default {
  components: {
    TableComponent
  },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label"
      },
      activeName: "11",
      form: {
        channelType: "",
        status: "",
        name: "",
        code: "",
        arriveTime: "",
        channelExplain: "",
        minChargeCount: "",
        minChargeWeight: "",
        bulkfactorRule: "",
        channelAbility1: [],
        specialProduct1: [],
        other1: [],
        channelAbility: [],
        specialProduct: [],
        other: []
      },
      channelAbilitys: [],
      channelTypeList: [],
      others: [],
      specialProducts: [],
      volumeWightRules: [],
      loadPortAddress: [],
      countrys: [],
      countryStates: [],
      rules: {
        channelType: [
          { required: true, message: "请选择渠道类型", trigger: "change" }
        ],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
        name: [{ required: true, message: "请填写渠道名称", trigger: "blur" }],
        code: [{ required: true, message: "请选择渠道代码", trigger: "blur" }],
        bulkfactorRule: [
          { required: true, message: "请选择体积重规则", trigger: "change" }
        ],
        channelAbility1: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个",
            trigger: "change"
          }
        ],
        specialProduct1: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个",
            trigger: "change"
          }
        ],
        other1: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个",
            trigger: "change"
          }
        ]
      },
      tableInfo: null
    };
  },
  computed: {},
  props: ["field"],
  mounted() {
    this.init();
    // 存在即是编辑
    if (this.$store.state.edit.row.channelType) {
      const form = this.$store.state.edit.row;
      this.form.id = this.$store.state.edit.id;
      console.log(
        "%cthis.form.id: ",
        "color: MidnightBlue; background: Aquamarine;",
        this.form.id
      );
      this.form.channelType = form.channelType;
      this.form.status = form.status.toString();
      this.form.name = form.name;
      this.form.code = form.code;
      this.form.arriveTime = form.arriveTime;
      this.form.channelExplain = form.channelExplain;
      this.form.minChargeCount = form.minChargeCount;
      this.form.minChargeWeight = form.minChargeWeight;
      this.form.bulkfactorRule = form.bulkfactorRule;
      this.form.channelAbility1 = form.channelAbility.split(",");
      this.form.specialProduct1 = form.specialProduct.split(",");
      this.form.other1 = form.other.split(",");
      this.form.channelAbility = form.channelAbility;
      this.form.specialProduct = form.specialProduct;
      this.form.other = form.other;
    }
  },
  methods: {
    init() {
      ajax("initCustomerChannelData", {})
        .then(res => {
          this.formInfo = res;
          localStorage.setItem("initCustomerChannelData", JSON.stringify(res));
          this.channelAbilitys = res.channelAbilitys;
          this.channelTypeList = res.channelTypeList;
          this.others = res.others;
          this.specialProducts = res.specialProducts;
          this.volumeWightRules = res.volumeWightRules;
          this.loadPortAddress = res.loadPortAddress;
          this.countrys = res.countrys;
          this.countryStates = res.countryStates;
        })
        .catch(error => {
          console.log(error);
        });

      ajax("queryChannelById", {
        customerChannelId: this.$store.state.edit.row.id,
        consignmentPlaceId: 11
      })
        .then(res => {
          this.tableInfo = res;
        })
        .catch(error => {
          console.log(error);
        });
    },
    m(k) {
      return m(k);
    },
    callbefore() {
      this.$store.state.edit.row = this.form;
      console.log("submit", this.$store.state.edit.row);
    },
    callvalidate() {
      this.$refs.basisForm.validate(valid => {
        if (valid) {
          console.log("submit");
          const cloneData = clone(this.form);
          this.form.channelAbility = cloneData.channelAbility1.toString();
          this.form.specialProduct = cloneData.specialProduct1.toString();
          this.form.other = cloneData.other1.toString();
        } else {
          console.log("error submit!!");
          this.form.channelAbility = [];
          this.form.specialProduct = [];
          this.form.other = [];
          return false;
        }
      });

      return true;
    },
    handleClick(tab) {
      ajax("queryChannelById", {
        customerChannelId: this.$store.state.edit.row.id,
        consignmentPlaceId: parseInt(tab.name)
      })
        .then(res => {
          this.tableInfo = res;
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleNodeClick(data) {
      console.log(data);
    }
  }
};
</script>

<style scoped>
/deep/.el-select {
  width: 100%;
}
</style>
